<template>
	<view class="content">
		<view class="coo_content">
			<view class="coo_top flex">
				<h1>{{text}}</h1>
				<h2>{{english}}</h2>
			</view>
			<ul class="coo_list">
				<li class="coo_lists" v-for="(item,index) in list" :key="index">
					<image :src="item.src" mode="" class="img"></image>
					<view class="coo_list_bottom" @click="jumpNews(item.id)">
						<p >{{item.title1}}</p>
						<text>{{item.title2}}</text>
					</view>
				</li>
			</ul>
			<view class="coo_kefu">
				<h1><span></span>{{kefu}}</h1>
				<ul>
					<li v-for="(item,index) in lists" :key="index">
						<image :src="item.src" mode="" class="img1"></image>
						<text>{{item.phone}}</text>
					</li>
				</ul>
			</view>
			<ul class="coo_contens" v-for="(item,index) in contents" :key="index">
				<h1><span></span>{{item.title}}</h1>
				<li v-for="(items,indexs) in item.article" :key="index">
					<ul class="coo_contens_nav">
						<li>{{items.text}}</li>
						<li>{{items.email}}</li>
					</ul>
				</li>
			</ul>
			<ul class="coo_contens" v-for="(item,index) in contents_c" :key="index">
				
				<li v-for="(items,indexs) in item.article" :key="index">
					<ul class="coo_contens_nav">
						<li>{{items.text}}</li>
						<li>{{items.email}}</li>
					</ul>
				</li>
			</ul>
			<ul class="coo_contens" v-for="(item,index) in bottom" :key="index">
				<h1><span></span>{{item.title}}</h1>
				<li class="coo_li">{{item.content}}</li>
			</ul>
			<view class="coo_bottom">
				<image :src="src2" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				src2:'/static/images/co_bo_02.gif',
				  text:'在一起 创未来',
				  english:'TOGETHER CREATE THE DUTURE',
				 kefu:'客服中心',
				src1:'/static/images/油价预测_03.gif',
				list:[
					{id:'1',src:'/static/images/cooperate_02.gif',title1:'我是加油站老板',title2:'即可入住'},
					{id:'2',src:'/static/images/cooperate_04.gif',title1:'我是车队负责人',title2:'申请合作'},
					{id:'3',src:'/static/images/cooperate_06.gif',title1:'我是市场合作负责人',title2:'申请合作'}
				],
				lists:[
					{id:'1',src:'/static/images/cooperate_09.gif',phone:'400-0835-999'},
					{id:'1',src:'/static/images/cooperate_12.gif',phone:'service@newlink.com'}
				],
				contents:[
					{
						title:'业务联系',
					article:[
						{text:'加油站业务合作',email:'nlsun@newlink.com'},
						{text:'充电业务合作',email:'nlyu@gokuaidian.com'},
						{text:'商务合作',email:'nlwang@newlink.com'},
						{text:'企业用油、企业福利合作',email:'nlqfwang@newlink.com'}
					]}
				],
				contents_c:[
					{
						title:'市场合作',
						article:[
							{text:'市场合作',email:'market@newlink.com'},
						]
					},
					{
						title:'媒体合作',
						article:[
							{text:'媒体合作',email:'pr@newlink.com'},
						]
					},
					{
						title:'广告合作',
						article:[
							{text:'广告合作',email:'nlwang@newlink.com'},
						]
					}
				],
				bottom:[
					{title:'关于我们',content:'团油,依托AI、5G、物联网技术,大幅降低“找油站“成本，帮助车主获得便捷、实惠的加油服务,同时为加油站提供一体化数字化服务能力,助力其数字化转型,实现降本增效。'}
				]
			}
		},
		methods:{
			jumpNews:function(id){
				console.log(id)
				if(id==1){
					uni.navigateTo({
						url: '/pages/mine/sanji/jia_ru',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}else if (id==2){
					uni.navigateTo({
						url: '/pages/mine/sanji/chedui',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}else{
				uni.navigateTo({
					url: '/pages/mine/sanji/shic',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
			}
		}
	}
</script>

<style>
	
	.flex{display: flex;flex-direction: column;align-items: center;}
	
	.img{display: block;width:100%;height: 300rpx;}
	.coo_top{margin: 0rpx auto; color: #f00;background-image:linear-gradient(to bottom ,#fee7eb ,#fffbfc);height: 200rpx;padding: 60rpx 0rpx 40rpx;}
	.coo_top h1{font-size: 80rpx;font-weight: bold;white-space: 5rpx;}
	.coo_top h2{font-size: 30rpx;letter-spacing: 5rpx;}
	
	.coo_lists{margin-bottom: 20rpx;width: 100%;text-align: center;}
	.coo_list_bottom{width:400rpx;margin: 10rpx auto;line-height: 40rpx;color: #fffbfc;background-color: #f00;}
	.coo_list_bottom text{font-size: 26rpx;color: #fea9bb;}
	/* 客服中心 */
	.coo_kefu ,.coo_contens{margin: 20rpx  ;}
	 h1{font-size: 40rpx;}
	 h1 span{display: inline-block;width:10rpx;height: 40rpx;background-color: #f00;vertical-align: middle;margin-right: 10rpx;}
	 ul{padding: 20rpx;border: 1px solid #e5e8f0;margin-top: 40rpx;}
	 ul li{line-height: 80rpx;}
	.img1{display: inline-block;width: 60rpx;height: 60rpx;vertical-align: middle;margin-right: 20rpx;}
	.coo_contens_nav li:first-child{background-color: #f8f9fb;color: #a6a6a7;}
	.coo_contens_nav{margin-top: 15rpx;padding: 0rpx;box-sizing: border-box;}
	.coo_contens_nav li{padding: 10rpx;line-height: 60rpx;}
	.coo_contens:nth-child(n+2){border: none;margin: 0rpx;}
	.coo_li{border: #a6a6a7 1px solid ;border-radius: 20rpx;padding: 20rpx;line-height: 40rpx;margin-top: 20rpx;}
	.coo_bottom image{display: block;width:100%;height: 300rpx;}
</style>







 